<template>
  <template v-for="(item, index) in dataArr" :key="index">
    <div
      class="card-item"
      v-if="item.code.includes(code)"
      :style="{ backgroundColor: item.bgColor || '#fff' }"
    >
      <div class="left-img">
        <img :src="item.icon" />
      </div>
      <div class="right-content">
        <div class="card-title">
          {{ item.title }}
          <el-popover
            v-if="item.tips"
            class="box-item"
            :content="
              item.tips && item.tips.replace('codeName', PROCESSES_TEXT_ENUM[code]?.processName)
            "
            placement="bottom"
          >
            <template #reference>
              <el-icon color="#ddd"><QuestionFilled /></el-icon
            ></template>
          </el-popover>
        </div>
        <div class="card-data">
          <template v-for="(valItem, valIndex) in item.value" :key="valIndex">
            {{ valItem }}
            <span class="unit">{{
              typeof item.unit === 'string' ? item.unit : item.unit[valIndex]
            }}</span>
          </template>
        </div>
      </div>
    </div>
  </template>
</template>

<script setup lang="ts">
  import { QuestionFilled } from '@element-plus/icons-vue'
  import { PROCESSES_TEXT_ENUM } from '@/utils/constants/common'
  const props = defineProps({
    dataArr: {
      type: Array,
      default: () => []
    },
    code: {
      type: String,
      default: ''
    }
  })
</script>

<style scoped lang="scss">
  .card-item {
    display: flex;
    width: 250px;
    // min-width: 230px;
    height: 80px;
    border-radius: 8px;
    margin-right: 12px;
    padding: 16px 0 16px 20px;
    box-sizing: border-box;
  }

  .left-img {
    width: 48px;
    height: 48px;
    margin-right: 44px;
  }

  .card-title {
    font-size: 14px;
    color: #4f5759;
    white-space: nowrap;
  }

  .card-data {
    margin-top: 7px;
    font-size: 20px;
    color: rgba($color: #000, $alpha: 0.9);

    .unit {
      font-size: 12px;
      margin-right: 8px;
    }
  }
</style>
